import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import moment from 'moment';
import { Row, Col, Card, Tabs, Form, Icon, Modal, Input, Table, Button, Select, Upload, message } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import token from '../../utils/token';
import {env, host} from '../../utils/request'
import styles from './classifyIcon.less';

function buildAuthorization() {
  let tokenVal = token.get();
  return (token !== '') ? tokenVal : '';
}

const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const Dragger = Upload.Dragger;
const { Option } = Select;
const confirm = Modal.confirm;

let choosedIds = new Set(); //多表格行选择存储区
// 页面逻辑: 增删查改都是即时生效, 移动是提交每一步操作到后台,并且前端模拟调整数据顺序, 点击保存才会生效 (这里后台有个类似缓冲区的设计,本来是准备保存整个页面的操作,但由于增加了一个待上线的状态,因此目前只对移动有效了)

@connect(({ classifyIcon, loading }) => ({
  classifyIcon,
  loading: loading.models.classifyIcon,
}))
@Form.create()
export default class ClassifyIcon extends PureComponent {
  state = {
    paramList: {
      pageNo: 1
    },
    added: {
      id: '',
    },
    detail: {
      id: '',
    },
    edited: {
      id: '',
      name: '',
      imgUrl: '',
    },
    firstDialogVisible: false,
    secondDialogVisible: false,
    thirdDialogVisible: false,
    detailThirdDialogVisible: false,
    previewDialogVisible: false,
    choosedImgUrl: '',
    showUpload: '',
    preview: {
      id: '',
      row: {},
    },
    dataBuf: {
      allCategoryIconData: [],
      thirdCategoryIconData: [],
    }
  };

  componentWillMount() {
    this.postCancelThenGetAll();
  };

  componentDidMount() {
  };

  getAllClassifyData = () => {//获取第一,二级数据
    const { dispatch } = this.props;
    const { dataBuf } = this.state;
    let postParam = {};
    dispatch({
      type: 'classifyIcon/fetchGetAllCategoryIcon',
      payload: {
        ...postParam
      }
    }).then(() => {
      const { classifyIcon: { allCategoryIconData } } = this.props;
      dataBuf.allCategoryIconData = allCategoryIconData;
      //setState刷新dom, trash
      this.setState({
        paramList: {pageNo: 1}
      });
    })
  };

  getThirdClassifyData = (id) => {//获取第三级数据
    const { dispatch } = this.props;
    const { dataBuf } = this.state;
    let postParam = {
      id: id,
    };
    dispatch({
      type: 'classifyIcon/fetchGetThirdCategory',
      payload: {
        ...postParam
      }
    }).then(() => {
      const { classifyIcon: { thirdCategoryIconData } } = this.props;
      dataBuf.thirdCategoryIconData = thirdCategoryIconData;
      //setState刷新dom, trash
      this.setState({
        paramList: {pageNo: 1}
      });
    });
  };

  addFirst = (list) => {//新增第一级
    const { dispatch, form } = this.props;
    let postParam = {
      catClass: 0,
      name: list.firstName,
    };
    dispatch({
      type: 'classifyIcon/fetchAddCategory',
      payload: {
        ...postParam
      },
    }).then(() => {
      this.setState({
        firstDialogVisible: false,
      });
      form.resetFields();
      this.postCancelThenGetAll();
    });
  };

  addSecond = (id, list) => {//新增第二级
    const { dispatch, form } = this.props;
    const { added } = this.state;
    added.id = '';
    let postParam = {
      catClass: 1,
      id: id,
      name: list.secondName,
    };
    dispatch({
      type: 'classifyIcon/fetchAddCategory',
      payload: {
        ...postParam
      }
    }).then(() => {
      this.setState({
        secondDialogVisible: false,
      });
      added.id = '';
      form.resetFields();
      this.postCancelThenGetAll();
    });
  };

  addThird = (id, list) => {//新增第三级
    const { dispatch, form } = this.props;
    const { added } = this.state;
    let postParam = {
      catClass: 2,
      id: id,
      name: list.thirdName,
    };
    if (list.thirdImg && typeof(list.thirdImg) == 'string') {
      postParam.img = list.thirdImg
    } else if (list.thirdImg && list.thirdImg.file && list.thirdImg.file.response) {
      postParam.img = list.thirdImg.file.response.data;
    }
    console.log(postParam);
    dispatch({
      type: 'classifyIcon/fetchAddCategory',
      payload: {
        ...postParam
      }
    }).then(() => {
      this.setState({
        thirdDialogVisible: false,
      });
      added.id = '';
      form.resetFields();
    });
  };

  editFirst = (id, list) => {//编辑第一级
    const { dispatch, form } = this.props;
    const { edited } = this.state;
    let postParam = {
      id: id,
      name: list.firstName,
    };
    dispatch({
      type: 'classifyIcon/fetchUpdateCategory',
      payload: {
        ...postParam
      }
    }).then(() => {
      this.setState({
        firstDialogVisible: false,
      });
      edited.id = '';
      form.resetFields();
      this.postCancelThenGetAll();
    });
  };

  editSecond = (id, list) => {//编辑第二级
    const { dispatch, form } = this.props;
    const { edited } = this.state;
    let postParam = {
      id: id,
      name: list.secondName,
    };
    dispatch({
      type: 'classifyIcon/fetchUpdateCategory',
      payload: {
        ...postParam
      }
    }).then(() => {
      this.setState({
        secondDialogVisible: false,
      });
      edited.id = '';
      edited.name = '';
      form.resetFields();
      this.postCancelThenGetAll();
    });
  };

  editThird = (id, list) => {//编辑第三级
    const { dispatch, form } = this.props;
    const { edited } = this.state;
    let postParam = {
      id: edited.id,
      name: list.thirdName,
    };
    if (list.thirdImg && typeof(list.thirdImg) == 'string') {
      postParam.img = list.thirdImg
    } else if (list.thirdImg && list.thirdImg.file && list.thirdImg.file.response) {
      postParam.img = list.thirdImg.file.response.data;
    }
    console.log(postParam);
    dispatch({
      type: 'classifyIcon/fetchUpdateCategory',
      payload: {
        ...postParam
      }
    }).then(() => {
      this.postCancelThenGetThird();
      this.setState({
        thirdDialogVisible: false,
        detailThirdDialogVisible: true,
        choosedImgUrl: '',
        showUpload: '',
      });
      edited.id = '';
      edited.name = '';
      edited.img = '';
      form.resetFields();
    });
  };

  firstOffline = (row) => {//第一级下线
    const { dispatch } = this.props;
    const vm = this;
    let postParam = {
      id: row.id,
    };
    confirm({
      title: '确定下线吗?',
      okText: '确定',
      cancelText: '取消',
      onOk() {
        dispatch({
          type: 'classifyIcon/fetchOfflineCategory',
          payload: {
            ...postParam
          }
        }).then(() => {
          vm.postCancelThenGetAll();
        });
      },
      onCancel() {},
    });
  };

  secondOffline = (row) => {//第二级下线
    const { dispatch } = this.props;
    const vm = this;
    let postParam = {
      id: row.id,
    };
    confirm({
      title: '确定下线吗?',
      okText: '确定',
      cancelText: '取消',
      onOk() {
        dispatch({
          type: 'classifyIcon/fetchOfflineCategory',
          payload: {
            ...postParam
          }
        }).then(() => {
          vm.postCancelThenGetAll();
        });
      },
      onCancel() {},
    });
  };

  thirdOffline = (row) => {//第三级下线
    const { dispatch } = this.props;
    const vm = this;
    let postParam = {
      id: row.id,
    };
    confirm({
      title: '确定下线吗?',
      okText: '确定',
      cancelText: '取消',
      onOk() {
        dispatch({
          type: 'classifyIcon/fetchOfflineCategory',
          payload: {
            ...postParam
          }
        }).then(() => {
          vm.postCancelThenGetThird();
        });
      },
      onCancel() {},
    });
  };

  deleteIcon = () => {//批量(删除)下线
    const { dispatch } = this.props;
    let postParam = {
      ids: Array.from(choosedIds)
    };
    if (postParam.ids && postParam.ids.length > 0) {
      console.log(postParam);
      dispatch({
        type: 'classifyIcon/fetchBatchOfflineCategory',
        payload: {
          ...postParam
        }
      }).then(() => {
        this.postCancelThenGetAll();
      });
    }
  };

  postSaveAll = () => {
    const { dispatch } = this.props;
    const vm = this;
    let postParam = {};
    confirm({
      title: '确定保存吗?',
      okText: '确定',
      cancelText: '取消',
      onOk() {
        dispatch({
          type: 'classifyIcon/fetchSaveSortCategory',
          payload: {
            ...postParam
          }
        }).then(() => {
          vm.getAllClassifyData();
        });
      },
      onCancel() {},
    });
  };

  postCancelThenGetAll = () => {//重置一二级所有的移动操作并刷新一二级数据
    const { dispatch } = this.props;
    const vm = this;
    let postParam = {};
    dispatch({
      type: 'classifyIcon/fetchNotSaveSortCategory',
      payload: {
        ...postParam
      }
    }).then(() => {
      vm.getAllClassifyData();
    });
  };

  postCancelThenGetThird = () => {//重置三级所有的移动操作并刷新三级数据
    const { dispatch } = this.props;
    const { detail } = this.state;
    let postParam = {};
    dispatch({
      type: 'classifyIcon/fetchNotSaveThirdSortCategory',
      payload: {
        ...postParam
      }
    }).then(() => {
      this.getThirdClassifyData(detail.id);
    })
  };

  handleDetailThirdOk = () => {
    const { dispatch } = this.props;
    let postParam = {};
    dispatch({
      type: 'classifyIcon/fetchSaveThirdSortCategory',
      payload: {
        ...postParam
      }
    });
    this.setState({
      detailThirdDialogVisible: false,
    });
  };

  handleDetailThirdCancel = () => {
    this.postCancelThenGetThird();
    this.setState({
      detailThirdDialogVisible: false,
    });
  };

  getPreviewData = (id) => {
    const { preview, dataBuf: {allCategoryIconData} } = this.state;
    preview.id = id;
    const { dispatch } = this.props;
    let _dataList = {};
    allCategoryIconData.forEach((val, index, arr) => {
      if (val.category.id == id) {
        Object.assign(_dataList, val.category);
        _dataList.child = val.children;
      }
    });
    if (_dataList.child) {
      _dataList.child.forEach((val, index, arr) => {
        let postParam = {
          id: val.id,
        };
        dispatch({
          type: 'classifyIcon/fetchGetThirdCategory',
          payload: {
            ...postParam
          },
          callback: (res) => {
            _dataList.child[index].child = res.data;
          }
        });
      });
    }
    preview.row = _dataList;
  };

  showNewFirstDialog = () => {
    const { edited } = this.state;
    edited.id = '';
    this.setState({
      firstDialogVisible: true,
    });
  };

  handleFirstOk = () => {
    const { form } = this.props;
    const { edited } = this.state;
    if (edited.id) {
      //编辑一级分类
      form.validateFields((err, fieldsValue) => {
        if (fieldsValue.firstName) {
          this.editFirst(edited.id, fieldsValue);
        }
      });
    } else {
      //添加一级分类
      form.validateFields((err, fieldsValue) => {
        if (fieldsValue.firstName) {
          this.addFirst(fieldsValue);
        }
      });
    }
  };

  handleFirstCancel = () => {
    const { edited } = this.state;
    edited.id = '';
    this.setState({
      firstDialogVisible: false,
    });
  };

  showNewSecondDialog = (row) => {
    const { added, edited } = this.state;
    added.id = row.id;
    edited.id = '';
    this.setState({
      secondDialogVisible: true,
    });
  };

  handleSecondOk = () => {
    const { form } = this.props;
    const { edited, added } = this.state;
    if (edited.id) {
      //编辑二级分类
      form.validateFields((err, fieldsValue) => {
        if (fieldsValue.secondName) {
          this.editSecond(edited.id, fieldsValue);
        }
      });
    } else {
      //添加二级分类
      form.validateFields((err, fieldsValue) => {
        if (fieldsValue.secondName) {
          this.addSecond(added.id, fieldsValue);
        }
      });
    }
  };

  handleSecondCancel = () => {
    const { edited } = this.state;
    edited.id = '';
    this.setState({
      secondDialogVisible: false,
    });
  };

  showNewThirdDialog = (row) => {
    const { added, edited } = this.state;
    added.id = row.id;
    edited.id = '';
    this.setState({
      thirdDialogVisible: true,
    });
  };

  handleThirdOk = () => {
    const { form } = this.props;
    const { edited, added } = this.state;
    if (edited.id) {
      //编辑三级分类
      form.validateFields((err, fieldsValue) => {
        if (fieldsValue.thirdName) {
          this.editThird(edited.id, fieldsValue);
        }
      });
    } else {
      //添加三级分类
      form.validateFields((err, fieldsValue) => {
        if (fieldsValue.thirdName) {
          this.addThird(added.id, fieldsValue);
        }
      });
    }
  };

  handleThirdCancel = () => {
    const { edited } = this.state;
    if (edited.id) {
      edited.id = '';
      edited.name = '';
      edited.img = '';
      this.setState({
        thirdDialogVisible: false,
        detailThirdDialogVisible: true,
        showUpload: '',
        // choosedImgUrl: '',
      });
    } else {
      this.setState({
        thirdDialogVisible: false,
      });
    }
  };

  viewDetail = (row) => {
    const { detail } = this.state;
    detail.id = row.id;
    this.postCancelThenGetThird();
    this.setState({
      detailThirdDialogVisible: true,
    });
  };

  showEditFirstDialog = (row) => {
    const { edited } = this.state;
    edited.id = row.id;
    edited.name = row.name;
    this.setState({
      firstDialogVisible: true,
    });
  };

  showEditSecondDialog = (row) => {
    const { edited } = this.state;
    edited.id = row.id;
    edited.name = row.name;
    this.setState({
      secondDialogVisible: true,
    });
  };

  showEditThirdDialog = (row) => {
    const { edited } = this.state;
    edited.id = row.id;
    edited.name = row.name;
    edited.img = row.img;
    this.setState({
      detailThirdDialogVisible: false,
      thirdDialogVisible: true,
    });
  };

  handleUploadChange = (file, fileList) => {
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      this.setState({
        showUpload: reader.result,
        choosedImgUrl: '',
      });
    }
  };

  handleGroupChange = (val) => {
    this.setState({
      showUpload: '',
      choosedImgUrl: val
    });
  };

  handleMoveUp = (row, index, type, parent) => {
    const { dispatch } = this.props;
    const { detail, dataBuf } = this.state;
    let postParam = {
      id: row.id,
    };
    dispatch({
      type: 'classifyIcon/fetchUpCategory',
      payload: {
        ...postParam
      }
    });
    switch(type) {
      case 1:
        //移动1级
        [dataBuf.allCategoryIconData[index - 1], dataBuf.allCategoryIconData[index]] = [dataBuf.allCategoryIconData[index], dataBuf.allCategoryIconData[index - 1]];
        break;
      case 2:
        //移动2级
        dataBuf.allCategoryIconData.forEach((_val, _index, _arr) => {
          if (_val.category.id == parent.id) {
            [_val.children[index - 1], _val.children[index]] = [_val.children[index], _val.children[index - 1]];
          }
        });
        break;
      case 3:
        //移动3级
        [dataBuf.thirdCategoryIconData[index - 1], dataBuf.thirdCategoryIconData[index]] = [dataBuf.thirdCategoryIconData[index], dataBuf.thirdCategoryIconData[index - 1]];
        break;
      default:
        break;
    }
    //刷新dom
    this.setState({
      paramList: {pageNo: 1}
    });
  };

  handleMoveDown = (row, index, type, parent) => {
    const { dispatch } = this.props;
    const { detail, dataBuf } = this.state;
    let postParam = {
      id: row.id,
    };
    dispatch({
      type: 'classifyIcon/fetchDownCategory',
      payload: {
        ...postParam
      }
    });
    switch(type) {
      case 1:
        //移动1级
        [dataBuf.allCategoryIconData[index], dataBuf.allCategoryIconData[index + 1]] = [dataBuf.allCategoryIconData[index + 1], dataBuf.allCategoryIconData[index]];
        break;
      case 2:
        //移动2级
        dataBuf.allCategoryIconData.forEach((_val, _index, _arr) => {
          if (_val.category.id == parent.id) {
            [_val.children[index + 1], _val.children[index]] = [_val.children[index], _val.children[index + 1]];
          }
        });
        break;
      case 3:
        //移动3级
        [dataBuf.thirdCategoryIconData[index + 1], dataBuf.thirdCategoryIconData[index]] = [dataBuf.thirdCategoryIconData[index], dataBuf.thirdCategoryIconData[index + 1]];
        break;
      default:
        break;
    }
    //刷新dom
    this.setState({
      paramList: {pageNo: 1}
    });
  };

  handlePreviewOk = () => {
    this.setState({
      previewDialogVisible: false
    })
  };

  handlePreviewCancel = () => {
    this.setState({
      previewDialogVisible: false
    })
  };

  showPreview = () => {
    const { dataBuf: {allCategoryIconData} } = this.state;
    if (allCategoryIconData && allCategoryIconData.length > 0) {
      this.getPreviewData(allCategoryIconData[0].category.id);  
    }
    this.setState({
      previewDialogVisible: true
    })
  };

  handleCancelAll = () => {
    const vm = this;
    confirm({
      title: '确定不保存吗?',
      okText: '确定',
      cancelText: '取消',
      onOk() {
        vm.postCancelThenGetAll();
      },
      onCancel() {},
    });
  };

  expandedRowRender = (row) => {
    const secondColumns = [
      {
        title: '序号',
        dataIndex: 'id',
        key: 'id',
        render: val => `${val}`,
      },
      {
        title: '分类名称',
        dataIndex: 'name',
        key: 'name',
        render: val => `${val}`,
      },
      {
        title: '移动',
        dataIndex: 'demob',
        key: 'demob',
        render: (text, record, index) => {
          return record.state != 'offline' ? 
          <div>
            {
              index != 0 ? <Icon type="arrow-up" style={{cursor: 'pointer'}} onClick={() => this.handleMoveUp(record, index, 2, row)} /> : ''
            }
            {
              row.child[index + 1] && row.child[index + 1].state != 'offline'? <Icon type="arrow-down" style={{cursor: 'pointer'}} onClick={() => this.handleMoveDown(record, index, 2, row)} /> : ''
            }
          </div>
          : ''
        },
      },
      {
        title: '添加分类',
        dataIndex: 'democ',
        key: 'democ',
        render: (text, record, index) => {
          return (
            record.state != 'offline' ? 
            <a href="javascript:;" onClick={() => this.showNewThirdDialog(record)}>
              添加三级分类
            </a>
            : ''
          );
        },
      },
      {
        title: '状态',
        dataIndex: 'state',
        key: 'state',
        render: (text, record, index) => {
          return (
            <span>{text == 'online' ? '已上线' : (text == 'wait-to-online' ? '待上线' : (text == 'offline' ? '已下线' : text))}</span>
          );
        },
      },
      {
        title: '操作',
        dataIndex: 'demoe',
        key: 'demoe',
        render: (text, record, index) => {
          return (
            <div>
              <a
                href="javascript:;"
                style={{ display: 'inlineBlock', marginRight: 20 }}
                onClick={() => this.viewDetail(record)}
              >
                查看详情
              </a>
              {
                record.state == 'wait-to-online' ? <a
                  href="javascript:;"
                  style={{ display: 'inlineBlock', marginRight: 20 }}
                  onClick={() => this.showEditSecondDialog(record)}
                >
                  编辑
                </a> : ''
              }
              {
                record.state == 'online' || record.state == 'wait-to-online' ?
                <a href="javascript:;" onClick={() => this.secondOffline(record)}>
                  下线
                </a>
                : ''
              }
            </div>
          );
        },
      },
    ];

    const rowSelectionSecond = {
      onSelect: (record, selected, selectedRows) => {
        if (selected) {
          choosedIds.add(record.id);
        } else {
          choosedIds.delete(record.id);
        }
      },

      onSelectAll: (selected, selectedRows, changeRows) => {
        if (selected) {
          changeRows.forEach((val, index, arr) => {
            choosedIds.add(val.id);
          });
        } else {
          changeRows.forEach((val, index, arr) => {
            choosedIds.delete(val.id);
          });
        }
      },
    };

    return (
      <Table
        columns={secondColumns}
        dataSource={row.child}
        pagination={false}
        rowSelection={rowSelectionSecond}
        rowKey={record => record.id}
        rowClassName={record => record.state == 'offline' ? `${styles['fadeRow']}` : ''}
      />
    );
  };

  render() {
    const { classifyIcon: { groupList }, loading, form } = this.props;
    const { edited, choosedImgUrl, showUpload, preview, dataBuf: {allCategoryIconData, thirdCategoryIconData} } = this.state;
    const { getFieldDecorator } = form;
    const vm = this;
    let firstTableData = [];
    allCategoryIconData.forEach((val, index, arr) => {
      if (val.category) {
        let _buf = val.category;
        _buf.child = val.children ? val.children : [];
        firstTableData.push(_buf);
      }
    });

    const tableColumns = [
      {
        title: '序号',
        dataIndex: 'id',
        key: 'id',
        render: val => `${val}`,
      },
      {
        title: '分类名称',
        dataIndex: 'name',
        key: 'name',
        render: val => `${val}`,
      },
      {
        title: '移动',
        dataIndex: 'demo2',
        key: 'demo2',
        render: (text, record, index) => {
          return record.state != 'offline' ? 
          <div>
            {
              index != 0 ? <Icon type="arrow-up" style={{cursor: 'pointer'}} onClick={() => this.handleMoveUp(record, index, 1)} />  : ''
            }
            {
              firstTableData[index + 1] && firstTableData[index + 1].state != 'offline' ? <Icon type="arrow-down" style={{cursor: 'pointer'}} onClick={() => this.handleMoveDown(record, index, 1)} /> : ''
            }
          </div> 
          : ''
        },
      },
      {
        title: '添加分类',
        dataIndex: 'demo3',
        key: 'demo3',
        render: (text, record, index) => {
          return (
            record.state != 'offline' ? 
            <a href="javascript:;" onClick={() => this.showNewSecondDialog(record)}>
              添加二级分类
            </a>
            : ''
          );
        },
      },
      {
        title: '状态',
        dataIndex: 'state',
        key: 'state',
        render: (text, record, index) => {
          return (
            <span>{text == 'online' ? '已上线' : (text == 'wait-to-online' ? '待上线' : (text == 'offline' ? '已下线' : text))}</span>
          );
        },     
      },
      {
        title: '操作',
        dataIndex: 'demo5',
        key: 'demo5',
        render: (text, record, index) => {
          return (
            <div>
              {
                record.state == 'wait-to-online' ?
                <a
                  href="javascript:;"
                  style={{ display: 'inlineBlock', marginRight: 20 }}
                  onClick={() => this.showEditFirstDialog(record)}
                >
                  编辑
                </a> : ''
              }
              {
                record.state == 'online' || record.state == 'wait-to-online' ?
                <a href="javascript:;" onClick={() => this.firstOffline(record)}>
                  下线
                </a>
                : ''
              }
            </div>
          );
        },
      },
    ];

    let thirdColumns = [
      {
        title: '序号',
        dataIndex: 'id',
        key: 'id',
      },
      {
        title: '分类名称',
        dataIndex: 'name',
        key: 'name',
        render: (text, record, index) => {
          return <div>
            {
              record.img ? <img src={record.img} style={{width: '100px'}} /> : ''
            }
            <span style={{display: 'inlineBlock', marginLeft: 10}}>{record.name}</span>
          </div>
        }
      },
      {
        title: '移动',
        dataIndex: 'demo2',
        key: 'demo2',
        render: (text, record, index) => {
          return record.state != 'offline' ? 
          <div>
            {
              index != 0 ? <Icon type="arrow-up" style={{cursor: 'pointer'}} onClick={() => this.handleMoveUp(record, index, 3)} /> : ''
            }
            {
              thirdCategoryIconData[index + 1] && thirdCategoryIconData[index + 1].state != 'offline' ? <Icon type="arrow-down" style={{cursor: 'pointer'}} onClick={() => this.handleMoveDown(record, index, 3)} /> : ''
            }
          </div>
          : ''
        },
      },
      {
        title: '状态',
        dataIndex: 'state',
        key: 'state',
        render: (text, record, index) => {
          return (
            <span>{text == 'online' ? '已上线' : (text == 'wait-to-online' ? '待上线' : (text == 'offline' ? '已下线' : text))}</span>
          );
        },
      },
      {
        title: '操作',
        dataIndex: 'demo4',
        key: 'demo4',
        render: (text, record, index) => {
          return (
            <div>
              {
                record.state == 'wait-to-online' ?
                <a
                  href="javascript:;"
                  style={{ display: 'inlineBlock', marginRight: 20 }}
                  onClick={() => this.showEditThirdDialog(record)}
                >
                  编辑
                </a>
                : ''
              }
              {
                record.state == 'online' || record.state == 'wait-to-online' ?
                <a href="javascript:;" onClick={() => this.thirdOffline(record)}>
                  下线
                </a>
                : ''
              }
            </div>
          );
        },
      },
    ];

    let [firstMoadlTitle, secondModalTitle, thirdModalTitle] = edited.id
      ? ['编辑一级分类', '编辑二级分类', '编辑三级分类']
      : ['添加一级分类', '添加二级分类', '添加三级分类'];

    const rowSelection = {
      onSelect: (record, selected, selectedRows) => {
        if (selected) {
          choosedIds.add(record.id);
        } else {
          choosedIds.delete(record.id);
        }
      },

      onSelectAll: (selected, selectedRows, changeRows) => {
        if (selected) {
          changeRows.forEach((val, index, arr) => {
            choosedIds.add(val.id);
          });
        } else {
          changeRows.forEach((val, index, arr) => {
            choosedIds.delete(val.id);
          });
        }
      },
    };

    const formItemLayout = {
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 6
        },
      },
      wrapperCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 16
        },
      },
    };

    const uploadProps = {
      name: 'file',
      headers: {
        Authorization: buildAuthorization(),
      },
      onChange(info) {
        const status = info.file.status;
        if (status !== 'uploading') {}
        if (status === 'done') {
          message.success(`${info.file.name} 图片上传成功.`);
        } else if (status === 'error') {
          message.error(`${info.file.name} 图片上传失败.`);
          vm.setState({
            upload: {
              url: '',
              fresh: false,
            }
          });
        }
      },
    };

    const groupItems = groupList ? groupList.map((item) => {
      return <Option value={item} key={item}>{item}</Option>
    }) : '';

    const firstItems = firstTableData.map((item) => {
      return (item.state == 'online' || item.state == 'wait-to-online' ? <div className={styles.firstCol} key={item.id} onClick={() => this.getPreviewData(item.id)}>
        <div className={preview.id == item.id ? styles.test : ''}><span>{item.name}</span></div>
      </div> : '')
    });
    const secondItems = preview.row.child ? preview.row.child.map((item) => {
      const thirdItems = item.child ? item.child.map((val) => {
        return (
          val.state == 'online' || val.state == 'wait-to-online' ? <div className={styles.thirdCol} key={item.id}>
            <img src={val.img} style={{maxWidth: '100%'}} />
            <p>{val.name}</p>
          </div> : ''
        )
      }) : '';
      return item.state == 'online' || item.state == 'wait-to-online' ? <div className={styles.secondCol} key={item.id}>
        <p>{item.name}</p>
        {thirdItems}
      </div> : ''
    }) : '';

    return (
      <PageHeaderLayout title="分类图标">
        <Card bordered={false}>
          <div style={{ marginBottom: 20 }}>
            <Button onClick={this.showNewFirstDialog}>新建分类</Button>
          </div>

          <Table
            loading={loading}
            dataSource={firstTableData}
            columns={tableColumns}
            pagination={false}
            rowSelection={rowSelection}
            expandedRowRender={this.expandedRowRender}
            // onChange={this.handleStandardTableChange}
            rowKey={record => record.id}
            rowClassName={record => record.state == 'offline' ? `${styles['fadeRow']}` : ''}
          />

          <div style={{ marginTop: 20 }}>
            <Button onClick={this.deleteIcon}>批量删除</Button>
          </div>

          <div style={{width: "100%", textAlign: "center", marginTop: 10}}>
            <Button onClick={this.handleCancelAll}>不保存</Button>
            <Button onClick={this.postSaveAll} style={{marginLeft: 20}}>保存</Button>
            <Button onClick={this.showPreview} style={{marginLeft: 20}}>预览</Button>
          </div>
        </Card>

        <Modal
          title={firstMoadlTitle}
          visible={this.state.firstDialogVisible}
          onOk={this.handleFirstOk}
          onCancel={this.handleFirstCancel}
        >
          <Form layout="inline">
            <FormItem
              label={<span style={{ width: 100, display: 'inline-block' }}>一级分类名称</span>}
            >
              {getFieldDecorator('firstName', {
                rules: [{ required: true, message: '请输入一级分类名称' }],
                initialValue: edited.id ? edited.name : '',
              })(<Input />)}
            </FormItem>
          </Form>
        </Modal>

        <Modal
          title={secondModalTitle}
          visible={this.state.secondDialogVisible}
          onOk={this.handleSecondOk}
          onCancel={this.handleSecondCancel}
        >
          <Form layout="inline">
            <FormItem
              label={<span style={{ width: 100, display: 'inline-block' }}>二级分类名称</span>}
            >
              {getFieldDecorator('secondName', {
                rules: [{ required: true, message: '请输入二级分类名称' }],
                initialValue: edited.id ? edited.name : '',
              })(<Input />)}
            </FormItem>
          </Form>
        </Modal>

        <Modal
          title="查看详情"
          visible={this.state.detailThirdDialogVisible}
          onOk={this.handleDetailThirdOk}
          onCancel={this.handleDetailThirdCancel}
          okText="保存"
          cancelText="不保存"
          keyboard={false}
          maskClosable={false}
          width={'60%'}
        >
          <Table
            loading={loading}
            dataSource={thirdCategoryIconData}
            columns={thirdColumns}
            pagination={false}
            style={{ marginBottom: 20 }}
            rowKey={record => record.id}
            rowClassName={record => record.state == 'offline' ? `${styles['fadeRow']}` : ''}
          />
        </Modal>

        <Modal
          title={thirdModalTitle}
          visible={this.state.thirdDialogVisible}
          onOk={this.handleThirdOk}
          onCancel={this.handleThirdCancel}
        >
          <Row>
            <Col>
              <Form layout="horizontal">
                <Col span={24}>
                  <FormItem {...formItemLayout}
                    label={<span>分类名称</span>}
                  >
                    {getFieldDecorator('thirdName',{
                      rules: [{ required: true, message: '请输入三级分类名称' }],
                      initialValue: edited.id ? edited.name : '',
                    })(<Input />)}
                  </FormItem>
                </Col>
                <Col span={24}>
                  <FormItem {...formItemLayout}
                    label={<span>图片分组</span>}
                  >
                    {getFieldDecorator('thirdGroup')(
                      <Select style={{ width: '100%' }} onChange={this.handleGroupChange}>
                        { groupItems }
                      </Select>
                    )}
                  </FormItem>
                </Col>
                <Col span={24}>
                  <FormItem {...formItemLayout}
                    label={<span>选择图片</span>}
                  >
                    <img src={choosedImgUrl} style={{width: 100}} />
                  </FormItem>
                </Col>
                <Col span={24}>
                  <FormItem {...formItemLayout}
                    label={<span>本地上传</span>}
                  >
                    {getFieldDecorator('thirdImg')(
                      <Dragger
                        {...uploadProps} 
                        action={host[env] + '/user/creditMarket/upload/'}
                        showUploadList={false} 
                        beforeUpload={(file, fileList) => this.handleUploadChange(file, fileList)}
                      >
                        {
                          !!showUpload || !!edited.img ?
                          <img src={showUpload ? showUpload : (edited.img ? edited.img : '')} style={{maxWidth: "100%"}} /> : 
                          <div>
                            <p className="ant-upload-drag-icon">
                              <Icon type="inbox" />
                            </p>
                            <p className="ant-upload-text">支持png、jpg格式，大小不超过1M</p>
                          </div>
                        }
                      </Dragger>
                    )}
                  </FormItem>
                </Col>
              </Form>
            </Col>
          </Row>
        </Modal>

        <Modal
          title="预览"
          visible={this.state.previewDialogVisible}
          onOk={this.handlePreviewOk}
          onCancel={this.handlePreviewCancel}
          footer={null}
        >
        <div className={styles.previewBody}>
          <div className={styles.sideColumn}>
            {firstItems}
          </div>
          <div style={{marginLeft: 100}}>
            <div style={{width: '100%', textAlign: 'center'}}>
              <img src={preview.row.img} style={{height: 100, maxWidth: '100%'}} />
            </div>
            <div className={styles.secondBody}>
              {secondItems}
            </div>
          </div>
        </div>
        </Modal>
      </PageHeaderLayout>
    );
  }
}
